<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p[id^="one"]{
        color: chartreuse;
        font-size: 20px;
    }/*属性选择器中^指的是前缀，E[att^=value] ,E是选择器，att是属性，value是属性值，总的表示满足有E.att.value相同且value作为前缀，才会被改变。*/
p[id$="two"]{
    color: blue;
    font-size: 79px;
}/*属性选择器中$指的是后缀，E[att$=value],E是选择器，att是属性，value是属性值，总的表示满足有E.att.value相同且value作为后缀，才会被改变。*/
li[id*="three"]{
    color: chocolate;
    font-size: 50px;
}
li[love="three"]{
    color: chartreuse;
}/*css属性选择器可以自定义数据属性也可以用任何其他属性。例如a[href^="http"]css规则会选择所有href属性以http开头的a标签href与http都是自定义的。*/
</style>
<body>
    <p id="one">你好</p>
    <p id="one1">希望</p>
    <p id="2one">远方</p> /*one不是前缀所以不会被第一个css样式改变 */
    <p id="two">东南枝</p>
    <p id="3two">折柳</p>
    <p id="two4">故乡</p>/*two 不是后缀所以不会被第二个css样式改变*/
    <li id="three">清风</li>
    <li id="1three">戏中人</li>
    <li id="three2">楚门的世界</li>/*3个都有three所以都发生改变*/
    <li love="three">扶苏</li>
    
</body>
</html>